<template>
  <div>
    <el-container>
      <el-header height="60px">
        <el-row>
          <div style="margin: 0 160px">
            <el-col :span="6">
              <span>BUCTCODER</span>
            </el-col>
          </div>
          <el-col :span="3">
            <i class="el-icon-message"></i>
            <el-button type="text" @click="message">学生基本信息</el-button>
          </el-col>
          <el-col :span="3">
            <i class="el-icon-document"></i>
            <el-button type="text" @click="tongji">近期比赛统计</el-button>
          </el-col>
          <el-col :span="5">
            <i class="el-icon-data-line"></i>
            <el-button type="text" @click="rank">各类排行榜单</el-button>
          </el-col>
          <el-col :span="5">
            <el-button type="info" plain @click="denglu">登录</el-button>
            <el-button type="primary" @click="zhuce">注册</el-button>
          </el-col>
        </el-row>
      </el-header>

      <el-container style="height: 750px; border: 1px solid #eee">
        <el-aside style="width: 160px; background-color: #ffffff">
        </el-aside>
        <el-main>
          <el-table
              :data="contesttableData"
              border
              fit
              highlight-current-row
              style="width: 100%"
              ref="editTable"
          >
            <el-table-column prop="contestname" label="比赛名称">
              <template slot-scope="{row}">
                <el-link class="sub-body" @click="preview(row)">{{row.contestname}}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="contestdate" label="比赛日期">
            </el-table-column>
            <el-table-column prop="tablename" label="比赛来源">
            </el-table-column>
            <el-table-column prop="contestantcount" label="比赛人数">
            </el-table-column>
          </el-table>
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pagenum"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pagesize"
              layout="prev, pager, next,  sizes, total, jumper"
              :total="total"
          ></el-pagination>
        </el-main>
        <el-aside style="width: 160px; background-color: #ffffff">
        </el-aside>
      </el-container>
    </el-container>
  </div>
</template>

<script>

export default {
  name: "recent2",
  data() {
    return {
      contesttableData: [],
      pagenum: 1,//当前加载的page
      pagesize: 10,//当前的limit
      total: 0//后台返回的总页数
    };
  },
  created() {
    this.initTable()//页面初始加载
  },
  methods: {
    message(){
      this.$router.push("/homepage")
    },
    tongji(){
      this.$router.push("/recent2")
    },
    rank(){
      this.$router.push("/atcoderrank2")
    },
    denglu(){
      this.$router.push("/")
    },
    zhuce(){
      this.$router.push("/register")
    },
    handleCurrentChange(val) {
      this.pagenum = val; //val可以获取当前用户选择的页码数
      this.initTable();//页面加载触发的查询所有的事件
    },
    //每页显示的条数大小改变时触发的方法
    handleSizeChange(val) {
      this.pagesize = val;//获取用户想要每页显示的条数
      this.initTable();
    },
    initTable() {
      this.$axios.get("/common/getlatestcontests/"+this.pagenum+"/"+this.pagesize)
          .then(response => {
            this.contesttableData = response.data.data.list;
            this.total = response.data.data.total;
          })
    },
    preview(row) {
      if(row.tablename=='codeforces'){
        this.$router.push({path: '/contest3', query: {id: row.contestname}})
      }
      else{
        this.$router.push({path: '/contest2', query: {id: row.contestname}})
      }
    }
  }
}
</script>